<template>
  <div class="detailrecommend">
    <goods-cover class="recommend">
      <goods-cover-item
        @click.native="detail(item)"
        class="item"
        v-for="item in datas"
        :key="item.id"
      >
        <template #good_img>
          <img @load="loadimg" class="gimg" :src="item.img" alt />
        </template>
        <template #good_name>
          <p class="gname">{{item.gname}}</p>
        </template>
        <template #good_price>
          <span class="gprice">{{price(item.price,item.discount)|showPrice}}</span>
        </template>
      </goods-cover-item>
    </goods-cover>
  </div>
</template>

<script>
import GoodsCover from "components/public/goods_cover/GoodsCover";
import GoodsCoverItem from "components/public/goods_cover/GoodsCoverItem";
export default {
  name: "DetailRecommend",
  props: {
    datas: {
      type: Array
    }
  },
  data() {
    return {
      content: null
    };
  },
  computed: {
    price() {
      return (price, count) => {
        return price * count * 0.1;
      };
    }
  },
  components: {
    GoodsCover,
    GoodsCoverItem
  },
  methods: {
    detail(item) {
      this.$router.push({
        path: `/good/${item.id}`,
        query: {
          categroy_base_id: item.categroy_base_id
        }
      });
      this.$bus.$emit("detail");
    },
    loadimg() {
      this.$bus.$emit("loadimg");
    }
  }
};
</script>

<style lang="less" scoped>
.detailrecommend {
  padding: 10px;
  background-color: #fff;
  .recommend {
    .item {
      width: 33.33%;
      padding: 5px;
      .gimg {
        width: 100%;
        height: 180px;
      }
      .gname {
        font-size: 12px;
        height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>